<template>
    <div class="alleq">
        <div class="header">
            <div class="back" @click="goback()">
                <x-icon type="ios-arrow-back" size="25"></x-icon>
            </div>
            <div class="content">
                <span v-if="!searchState" style="color:#fff">所有设备</span>
                <x-input placeholder="请输入要查询的设备" v-model="searchContent" v-if="searchState" @keyup.native="searchEq"></x-input>
                <!--<input type="text"  >-->
            </div>
            <div class="rightSearch" @click="startSearch">
                <x-icon type="ios-search-strong" size="25" v-if="!searchState"></x-icon>
                <x-icon type="ios-close-empty" size="25" v-if="searchState"></x-icon>
            </div>
        </div>
        <div class="searchResult" v-if="searchState&&searchContent">
            <div class="searchContent" v-if="this.searchEqData&&this.searchEqData.length>0">
                    <span v-for="(item,index) in this.searchEqData" v-html="item.eqName||item.show" @click="jumpNewData(item)"></span>
            </div>
        </div>
        <product-list :demoData="demoData"></product-list>
        <pageination :total="model.total" :size="1" :page="1" :changge="pageFn" class="page" v-if="model.total>6"></pageination>
    </div>
</template>

<script>
    import productList from '../common/product-list';
    import pageination from 'vue_pageination';
    import {DataService} from "../../axios/api";
    export default {
        name:'all-eq',
        components:{
            productList,
            pageination,
        },
        data() {
            return {
                searchState:false,
                model:{
                    total:0,//总页数
                    size:6,//每页显示条目个数不传默认10
                    page:1,//当前页码
                },
                allData:[],
                demoData:[],
                timer : '',
                searchContent:'',
                searchEqData:[],
            }
        },
        methods:{
            //页码切换执行方法
            pageFn(val){
                this.model.page=val;
                this.demoData = this.allData.slice(6*(val-1),6*val)
            },
            getAllData(){
                DataService.post('searchEquipmentController/getEquipment').then(res=>{
                    this.allData = res.data;
                    this.demoData = res.data.slice(0,6)
                    this.model.total = (this.allData.length/this.model.size);
                }).catch(err=>{
                    console.log(err)
                })
            },
            searchData(data){
                DataService.post('searchEquipmentController/fuzzySearchEquipment',{eqName:data}).then(res=>{
                    this.searchEqData = []
                    for(let x in res.data[0]){
                        this.searchEqData = [...this.searchEqData,...res.data[0][x]]
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            goback(){
                this.$router.go(-1)
            },
            startSearch(){
                this.searchContent = '';
                this.searchState = !this.searchState;
            },
            searchEq(){
                this.timer?clearTimeout(this.timer):'';
                if(this.searchContent){
                    this.searchContent = this.searchContent.trim();
                    this.timer = setTimeout(this.searchData,500,this.searchContent)
                }else{
                    this.searchEqData = []
                    this.getAllData()
                }

            },
            jumpNewData(item){
                DataService.post('searchEquipmentController/getEquipment',{
                    eqNameId:item.eqNameId||item.eqIds,
                    eqName:item.eqName||item.show,
                    eqType:item.eqIds?1:0,
                }).then(res=>{
                    this.searchContent = item.eqName||item.show;
                    this.searchEqData = [];
                    this.model.total = res.data.length;
                    this.demoData = res.data.slice(0,6)
                })
            }
        },
        mounted() {
            this.getAllData();
            console.log(this.$router);
            document.onclick = e=>{
                if(typeof e.target.className =='string'){
                    (e.target.className).includes('weui-icon-clear')?this.getAllData():'';
                }
            }

        }
    }
</script>

<style lang="less" scoped>
    @import '../common/css/home.less';
    .alleq{
        position: relative;
        .searchResult{
            position: absolute;
            left: 0;
            top:-5px;
            /*height: 50px;*/
            width: 100%;
            display: flex;
            justify-content: center;
            z-index: 1000;
            .searchContent{
                width: calc(100vw - 100px);
                border: 1px solid #dedede;
                background: #fff;
                span {
                    display: block;
                    width: 95%;
                    margin: 6px auto;
                    font-size: 12px;
                    color: #333;
                    cursor: pointer;
                    &:hover{
                        background: #0078d7;
                    }
                }
            }
        }
        .header{
            height: 46px;
            background: @Homecolor;
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /deep/ .vux-x-icon{
                fill: #fff;
            }
            /deep/ .vux-x-input.weui-cell{
                cursor: pointer;
                background: #fff;
                border-radius: 10px;
                padding: 0;
                padding-left: 10px;
                color: #000;
                width: 100%;
            }
            .back{
                display: flex;
                align-items: center;
                width: 45px;
                color: #fff!important;
            }
            .content{
                display: flex;
                align-items: center;
                width:calc(100vw - 150px);
                align-items: center;
                justify-content: center;
                input{
                    width: calc(100vw - 100px);
                    height: 25px;
                    padding: 0 5px;
                    border-radius: 30px;
                    border: 1px solid #efefef;
                    outline: none;
                    font-size: 12px;
                }

            }
            .rightSearch{
                width: 45px;
                display: flex;
                align-items: center;
                flex-direction: column-reverse;
            }
        }
        position: relative;
        height: 100%;
        /deep/ ul.list{
            display: flex;
            margin-top: 45px;

        }
        .page{
            margin: 0 auto;
            margin-top: 5px;
            cursor: pointer;
        }
        /deep/ .pagination_page{
            min-width: 25px ;
        }
    }

</style>
